<template>
    <div>
        <div class="vs-table-box">
            <el-form v-loading="loading" ref="ruleForm" label-position="right" class="orm-info" label-width="140px"
                :model="ruleForm" :rules="rules">
                <div style="display: flex; flex-wrap: wrap">
                    <el-form-item label="盘点名称：" prop="title">
                        <el-input v-model="ruleForm.title" style="width: 160px" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="商品类型：" prop="type">
                        <el-select style="width: 140px" @change="proChange" clearable v-model="ruleForm.type"
                            placeholder="请选择">
                            <el-option label="毛坯" value="1"> </el-option>
                            <el-option label="定制成品" value="2"> </el-option>
                            <el-option label="标准成品" value="6"> </el-option>
                            <el-option label="积分商品" value="3"> </el-option>
                            <el-option label="洗护用品" value="4"> </el-option>
                            <el-option label="其他" value="5"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单据备注：">
                        <el-input v-model="ruleForm.remark" placeholder="请输入标题" style="width: 500px"
                            type="textarea"></el-input>
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button type="primary" @click="chooseGoods">请选择商品</el-button>
                </el-form-item>
                <el-form-item>
                    <el-table :key="1" :data="ruleForm.inventory_info" border style="width: 100%"
                        v-if="ruleForm.type == 1 || ruleForm.type == 2 || ruleForm.type == 6">
                        <el-table-column prop="id" label="序号" align="center" width="100"> </el-table-column>
                        <el-table-column prop="number" label="商品编码" align="center"> </el-table-column>
                        <el-table-column prop="title" label="商品系列" align="center"> </el-table-column>
                        <el-table-column prop="roughcast" label="毛坯种类" align="center"> </el-table-column>
                        <template v-if="ruleForm.type == 6">
                            <el-table-column prop="item" label="款号" align="center" :key="3"> </el-table-column>
                        </template>
                        <template v-if="ruleForm.type == 1 || ruleForm.type == 2">
                            <el-table-column prop="needle" label="递针类型" align="center"> </el-table-column>
                            <el-table-column prop="sex" label="性别" align="center"> </el-table-column>
                            <el-table-column prop="length" label="长度" align="center"> </el-table-column>
                        </template>
                        <el-table-column prop="size" label="尺寸" align="center"> </el-table-column>
                        <el-table-column prop="colour" label="颜色" align="center"> </el-table-column>
                        <el-table-column prop="stock_count" label="系统库存" align="center"> </el-table-column>
                        <el-table-column label="盘点库存" align="center">
                            <template slot-scope="scope">
                                <el-input v-enter-money v-model="scope.row.count"
                                    @blur="blurInput($event, scope.$index)" placeholder=""></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="diff_count" label="库存差异" align="center">
                            <template slot-scope="scope">
                                <div :style="{ color: scope.row.diff_count < 0 ? 'red' : '#000' }">{{
                                        scope.row.diff_count
                                }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" align="center">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.remark" placeholder=""></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" width="160" label="操作" align="center">
                            <template slot-scope="scope">
                                <span @click="setRow(1, scope.row, scope.$index)" class="tab-table-text">删除</span>
                                <!-- <span @click="setRow(2,scope.row,scope.$index)" class="tab-table-text">添加</span> -->
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-table :key="2" :data="ruleForm.inventory_info" border style="width: 100%" v-else>
                        <el-table-column prop="id" label="序号" align="center" width="100"> </el-table-column>
                        <el-table-column prop="number" label="商品编码" align="center"> </el-table-column>
                        <el-table-column prop="title" label="商品系列" align="center"> </el-table-column>
                        <el-table-column prop="sku_text" label="规格" align="center"> </el-table-column>
                        <el-table-column prop="unit" label="单位" align="center"> </el-table-column>
                        <el-table-column prop="stock_count" label="系统库存" align="center"> </el-table-column>
                        <el-table-column label="盘点库存" align="center">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.count" @blur="blurInput($event, scope.$index)"
                                    placeholder=""></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="diff_count" label="库存差异" align="center"> </el-table-column>
                        <el-table-column label="备注" align="center">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.remark" placeholder=""></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" width="160" label="操作" align="center">
                            <template slot-scope="scope">
                                <span @click="setRow(1, scope.row, scope.$index)" class="tab-table-text">删除</span>
                                <!-- <span @click="setRow(2,scope.row,scope.$index)" class="tab-table-text">添加</span> -->
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <!-- <el-form-item>
                    <el-descriptions border :column="4">
                        <el-descriptions-item label="制单人员">kooriookami</el-descriptions-item>
                        <el-descriptions-item label="制单日期">18100000000</el-descriptions-item>
                        <el-descriptions-item label="审核人员">苏州市</el-descriptions-item>
                        <el-descriptions-item label="审核日期">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                    </el-descriptions>
                </el-form-item> -->
            </el-form>
            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()"> 返回</el-button>
                <el-button v-if="type != 1" @click="subitm" type="primary">提交</el-button>
            </div>
        </div>

        <choice-goods :showStock="true" v-if="dialogTableVisible" v-model="dialogTableVisible" :type="ruleForm.type"
            @change="changeGoods"></choice-goods>
    </div>
</template>

<script>
import ChoiceGoods from '@/components/ChoiceGoods.vue';
export default {
    components: { ChoiceGoods },
    data() {
        return {
            loading: false,
            ruleForm: {
                title: '',
                type: '',
                inventory_info: [],
                remark: '',
            },
            rules: {
                title: { required: true, message: '请输入盘点名称', trigger: 'change' },
                type: { required: true, message: '请选择商品类型', trigger: 'change' },
            },
            dialogTableVisible: false,
            tableData: [],
        };
    },
    created() {
        let { id, type } = this.$route.query;
        if (id) {
            this.getRoom(id);
        }
        if (type) {
            this.type = type;
            this.$route.meta.title = this.utils.typeTitle(type) + '盘点';
        }
    },
    methods: {
        setRow(type, row, index) {
            if (type == 1) {
                // 删除
                console.log(index);
                this.ruleForm.inventory_info.splice(index, 1);
            } else {
                //填加
                let obj = Object.assign({}, row);
                obj.num = '';
                this.ruleForm.inventory_info.push(obj);
            }
        },
        // 类型切换
        proChange() {
            this.ruleForm.inventory_info = [];
        },
        blurInput(e, index) {
            let row = this.ruleForm.inventory_info[index];
            if (row.count !== '') {
                row.count = parseInt(row.count);
            }
        },
        async chooseGoods() {
            if (!this.ruleForm.type) {
                return this.$message.warning('请选择商品类型');
            }
            this.dialogTableVisible = true;
        },
        async changeGoods(val) {
            let list = [];
            for (let v of val) {
                if (!this.ruleForm.inventory_info.find((v2) => v2.goods_id == v.id)) {
                    v.goods_id = v.id;
                    v.diff_count = 0;
                    v.count = '';
                    v.remark = '';
                    v.price = '';
                    v.stock_count = v.stock_count * 1 || 0;
                    list.push(v);
                }
            }
            this.ruleForm.inventory_info.push(...JSON.parse(JSON.stringify(list)));
            console.log(this.ruleForm.inventory_info);
        },
        async subitm() {
            this.$refs['ruleForm'].validate(async (valid) => {
                if (!valid) return;
                if (!this.ruleForm.inventory_info.length) {
                    return this.$message.warning('请选择产品');
                }
                let inventory_info = [];
                let flag = false;
                let numFlag = false;
                for (let i in this.ruleForm.inventory_info) {
                    inventory_info.push({
                        goods_id: this.ruleForm.inventory_info[i].id,
                        count: this.ruleForm.inventory_info[i].stock_count,
                        // goods_name: this.ruleForm.inventory_info[i].title,
                        inventory_count: this.ruleForm.inventory_info[i].count,
                        // diff_count: this.ruleForm.inventory_info[i].diff_count,
                        price: this.ruleForm.inventory_info[i].price,
                        remark: this.ruleForm.inventory_info[i].remark,
                    });
                }
                console.log(this.ruleForm.inventory_info);
                console.log(flag);
                // if (!flag) {
                //     return this.$message.warning('有商品无库存')
                // }
                // 9/18 盘点数量可以为0 因为要把库存数量-1 改成0库存
                // if (numFlag) {
                //     return this.$message.warning('请输入盘点数量');
                // }
                let parms = {
                    title: this.ruleForm.title,
                    inventory_info: JSON.stringify(inventory_info),
                    goods_type: this.ruleForm.type,
                    remark: this.ruleForm.remark,
                    store_id: JSON.parse(localStorage.getItem('userInfo')).store_id,
                };
                this.loading = true;
                let { code } = await this.$Http.inventoryAdd(parms);
                this.loading = false;
                if (code) {
                    this.$message.success('提交成功');
                    this.utils.backPage();
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>

</style>
